<template>
  <el-dialog :visible.sync="localVisible" title="填写发货信息" width="50%" @close="handleClose">
    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">

      <el-form-item label="请选择处理结果" prop="status" required>
        <el-select v-model="form.status" placeholder="请选择处理结果">
          <el-option label="同意" :value="1"></el-option>
          <el-option label="驳回" :value="-1"></el-option>
          <el-option label="待审核" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.status==1" label="到账方式" prop="to_type" required>
        <el-select v-model="form.to_type" placeholder="请选择到账方式">
          <el-option label="原路返回" value="原路返回"></el-option>
          <el-option label="到账到银行卡" value="到账到银行卡"></el-option>
          <el-option label="到账到支付宝" value="到账到支付宝"></el-option>
          <el-option label="到账到微信" value="到账到微信"></el-option>
          <el-option label="其它方式" value="其它方式"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.status==-1" label="驳回理由" prop="check_fail_reason" required>
       <el-select v-model="form.check_fail_reason" placeholder="快捷选择">
         <el-option label="退款金额错误" :value="'退款金额错误'"></el-option>
         <el-option label="退款金额过高" :value="'退款金额过高'"></el-option>
         <el-option label="订单已发货，不支持操作" :value="'订单已发货，不支持操作'"></el-option>
         <el-option label="订单已取消，不支持操作" :value="'订单已取消，不支持操作'"></el-option>
         <el-option label="订单已关闭，不支持操作" :value="'订单已关闭，不支持操作'"></el-option>
         <el-option label="订单已过期，不支持操作" :value="'订单已过期，不支持操作'"></el-option>
         <el-option label="其他" value=""></el-option>

       </el-select>
        <el-input type="textarea" v-model="form.check_fail_reason" placeholder="请填写驳回理由"></el-input>
      </el-form-item>

    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="submitForm">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'RefundDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      localVisible: false,
      form: {
        status: 0,// 1=已同意，-1=已驳回，0=待审核
        to_type: '',
        check_fail_reason: ''
      },
      rules: {
        status: [{ required: true, message: '请选择处理结果', trigger: 'blur' }],
        to_type: [{ required: true, message: '请选择到账方式', trigger: 'blur' }],
      }
    }
  },
  watch: {
    visible(newValue) {
      this.localVisible = newValue
      if (newValue) {
        // 如果对话框显示，则重置表单（可选）
        this.$nextTick(() => {
          this.$refs.formRef && this.$refs.formRef.clearValidate()
        })
      }
    },
    localVisible(newValue) {
      this.$emit('update:visible', newValue)
    }
  },
  methods: {
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          // 提交逻辑，比如调用API
          this.$emit('confirm', { ...this.form }) // 使用展开运算符创建新对象传递给父组件
          this.localVisible = false
        } else {
          console.log('表单验证失败')
          return false
        }
      })
    },
    handleClose() {
      this.localVisible = false
      this.$refs.formRef.resetFields()
    }
  }
}
</script>
